<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .wrap {
        width: 300px;
        margin: 100px auto 0;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 300px;
    }

    th,
    td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
    }

    th {
        background-color: #09c;
        font: bold 16px "微软雅黑";
        color: #fff;
    }

    td {
        font: 14px "微软雅黑";
    }

    tbody tr,
    tfoot tr {
        background-color: #f0f0f0;
    }

    tbody tr:hover,
    tfoot tr:hover {
        cursor: pointer;
        background-color: #fafafa;
    }
</style>

<body>
    <!-- 问题一

    请描述排他思想的概念，请编写代码实现一个排他的功能实现。

    答：排除所有的其他元素，仅保留自己。
    for(var i =0;i<xxx.length;i++){
        xxx[i].style.xx='xx'
    }
    this.style.xx='xxx'

    问题二

    如何获取一个元素的父节点？如何获取一个元素的子节点？

    答：获取父元素   元素.parentNode
        获取子元素   元素.children

    问题三

    如何创建一个元素节点？如何将创建好的节点添加到页面中展示？
    答：创建元素用 document.createElement('需要创建的元素')
        将元素添加到页面中元素.appendChild('需要添加的元素')

    -->
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td class="money">8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td class="money">5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td class="money">2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td class="money">2000</td>
                </tr>

            </tbody>
            <tfoot>
                <tr>

                    <td>总价</td>
                    <td colspan="2" id="smoney"></td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
<script>
    var j_cbAll = document.querySelector('#j_cbAll')
    var checkboxs = document.querySelectorAll('#j_tb input')
    var money = document.querySelectorAll('.money')
    var smoney = document.querySelector('#smoney')
    j_cbAll.onclick = function () {
        for (var i = 0; i < checkboxs.length; i++) {
            // this.checked表示是否选中选中为true，否则为false。
            checkboxs[i].checked = this.checked
        }
    }
    var j_cbAll = document.querySelector('#j_cbAll')
    var checkboxs = document.querySelectorAll('#j_tb input')
    j_cbAll.onclick = function () {
        var sum = 0
        for (var i = 0; i < checkboxs.length; i++) {
            checkboxs[i].checked = this.checked
            sum = sum + money1(checkboxs[i])
        }
        smoney.innerHTML=sum
    }
    
    for (var j = 0; j < checkboxs.length; j++) {
        checkboxs[j].setAttribute('index', j);
        checkboxs[j].onclick = function () {
            var flag = true
            var sum = 0
            for (var a = 0; a < checkboxs.length; a++) {
                if (!checkboxs[a].checked) {
                    flag = false
                }
                sum = sum + money1(checkboxs[a])
            }
            j_cbAll.checked = flag;
            smoney.innerHTML=sum
        }
    }
    function money1(ele) {
        var danjia = 0
        if (ele.checked) {
            danjia = money[ele.getAttribute('index')].innerHTML
           danjia= parseInt(danjia)
        }
        return danjia;
    }




    // var j_cbAll = document.querySelector('#j_cbAll');
    //     var j_tbs = document.querySelectorAll('#j_tb input');
    //     var zj = document.querySelector('.sum');
    //     // 给全选按钮添加点击事件
    //     j_cbAll.onclick = function () {
    //         // 利用循环让所有的按钮的checked值等于全选按钮的checked值
    //         for (var i = 0; i < j_tbs.length; i++) {
    //             j_tbs[i].checked = this.checked;
    //         }
    //         zj.innerHTML = getSum();
    //     }
    //     // 用循环给所有的复选按钮添加点击事件
    //     for (var i = 0; i < j_tbs.length; i++) {

    //         j_tbs[i].onclick = function () {
    //             // 获取复选按钮中被选中的元素
    //             var checks = document.querySelector('#j_tb').querySelectorAll('input:checked');
    //             // 判断如果checks的长度等于复选按钮伪数组的长度即所有按钮都被选中，就让全选按钮的checked的值为真
    //             if (checks.length == j_tbs.length) {
    //                 j_cbAll.checked = true;
    //             } else {
    //                 j_cbAll.checked = false;
    //             }
    //             zj.innerHTML = getSum();
    //         }
    //     }

    //     function getSum() {
    //         // 获得被选中的input元素
    //         var checks = document.querySelector('#j_tb').querySelectorAll('input:checked');
    //         var sum = 0;
    //         for (var i = 0; i < checks.length; i++) {
    //             // 获取checks的父节点表格
    //             var td = checks[i].parentNode;
    //             // 获取td的第二个兄弟结点
    //             var price = td.nextElementSibling.nextElementSibling;
    //             // 将price的文本内容获取并转换为数字型
    //             var dj = +price.innerHTML;
    //             // console.log(dj);
    //             sum += dj;
    //         }
    //         return sum.toFixed(2);
    //     }

</script>

</html>